<template>
  <div class="w-full" v-loading="loading">
    <el-button type="primary" class="mb-16px" @click="goCreate"
    >新增需求</el-button
    >
    <div class="flex flex-wrap">
      <Card v-for="item in list" :key="item.id" :data="item" isCreator />
      <el-pagination
          v-show="list.length"
          class="w-full justify-center"
          :total="total"
          layout="total, sizes, prev, pager, next"
          v-model:current-page="page.pageNum"
          v-model:page-size="page.pageSize"
          :page-sizes="[15, 30, 60, 120]"
      ></el-pagination>
      <Empty v-if="!list.length" />
    </div>
  </div>
</template>

<script setup>
import Card from "@/views/supply/components/demandCard.vue";
import { usePage, useLoading } from "@/hooks";
import { useUserStore } from "@/store";

const $api = inject("$api");
const { loading, setLoading } = useLoading();
const { page, total } = usePage(15);

const userStore = useUserStore();

const list = ref([]);
const getMyDemand = async () => {
  setLoading(true);
  try {
    const { data: rows, total: resTotal } = await $api.supply.getDemandList({
      ...page.value,
      createUserId: userStore.userInfo.userId,
    });
    list.value = rows;

    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
    () => page.value,
    () => {
      getMyDemand();
    },
    {
      deep: true,
    }
);

const router = useRouter();
const goCreate = () => {
  router.push({ name: "CreateDemand" });
};

onMounted(() => {
  getMyDemand();
});
</script>
